<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的信件 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/flatpickr/dist/flatpickr.min.css"
    />
    <script src="${resource}/static/plugins/flatpickr/dist/flatpickr.min.js"></script>
    <script src="${resource}/static/plugins/flatpickr/dist/l10n/index.js"></script>
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="container mt-3">
      <div class="row">
        <div class="col-sm-3">
          <div class="list-group mt-2">
            [#assign settings = 'member-letter'/] [#include 'user_left.html'/]
          </div>
        </div>
        <div class="col-sm-9">
          <h3 class="py-3 border-bottom">我的信件</h3>
          <div class="my-3">
            <h5>
              <span class="badge badge-info">${letter.typeName}</span>
              ${letter.title}
            </h5>
            <div class="small text-black-50 mt-2 pb-2 border-bottom">
              <i class="ml-2 far fa-clock"></i> ${ZFormat(letter.createTime, 'yyyy-MM-dd HH:mm:ss')}
            </div>
            <div class="mt-2">[#noescape]${letter.letterText}[/#noescape]</div>
          </div>
          [#if letter.replyText??]
            <div class="border border-warning p-2 my-3">
              <h5 class="text-danger"><i class="fas fa-comment-dots"></i> 回复部门:${letter.replyDeptName} </h5>
              <div class="small text-muted"><i class="far fa-user"></i> 回复时间:<i class="ml-2 far fa-clock"></i> ${ZFormat(letter.replyDate, 'yyyy-MM-dd HH:mm:ss')}</div>
              <div class="my-2">[#noescape]${letter.replyText!}[/#noescape]</div>
            </div>
          [#else]
          <div class="border border-warning p-2 my-3">
            <div class="my-2"> 正在办理中 </div>
          </div>
          [/#if]
          [#if letterConfig.openScore]
          <div class="rating-container">
              <div class="stars">
                  <div class="star" data-value="1"><i class="fas fa-star"></i></div>
                  <div class="star" data-value="2"><i class="fas fa-star"></i></div>
                  <div class="star" data-value="3"><i class="fas fa-star"></i></div>
                  <div class="star" data-value="4"><i class="fas fa-star"></i></div>
                  <div class="star" data-value="5"><i class="fas fa-star"></i></div>
              </div>
              <div class="rating-value">0</div>
              <div class="rating-text">请评分</div>
              <button class="submit-btn">提交评分</button>
          </div>
          [/#if]
        </div>
      </div>
    </div>
    [#include '../includes/footer.html'/] [#include '../includes/inc_msg.html'/]
    <script>
      $(function () {
        Cms.getLoginUser("${base}", "${api}", false, loginedCallBack);
        const token = sessionStorage.getItem("accessToken")
        const link = $("#letter").attr("href")
        $('a[id^="letter-"]').attr('href', function(index, oldHref) {
          return oldHref+"?Authorization="+token;
        });
        $("#validForm").validate({
          submitHandler: function (form, event) {
            event.preventDefault();
            const token = sessionStorage.getItem("accessToken");
            axios
              .post(form.action, $(form).serializeJSON(), {
                headers: {
                  "Tenant-Id": Cms.getTenantId(),
                  Authorization: "Bearer " + token,
                },
              })
              .then(function (response) {
                var data = response.data;
                if (data.code !== 0) {
                  alertTip(data.msg);
                } else {
                  successTip();
                }
                location.reload();
              });
          },
        });
      });
      function loginedCallBack(response) {
        $("#nickname").val(response.data.data.nickname);
        $("#email").val(response.data.data.email);
        $("#sex").val(response.data.data.sex);
        $("#mobile").val(response.data.data.mobile);
        $("#sex option[value='" + response.data.data.sex + "']").attr(
          "selected",
          "selected"
        );
      }

      [#if letterConfig.openScore]
      $(document).ready(function() {
          let currentRating = ${letter.score};
          let isSubmitted = false;
          //已经评价过
          [#if letter.scoreTime??]
            isSubmitted = true
            highlightStars(currentRating);
            updateRatingText(currentRating);
            $('.rating-value').text(currentRating);
          [/#if]
          // 鼠标悬停效果
          $('.star').hover(
              function() {
                  if (!isSubmitted) {
                      const value = $(this).data('value');
                      highlightStars(value);
                      updateRatingText(value);
                  }
              },
              function() {
                  if (!isSubmitted) {
                      highlightStars(currentRating);
                      updateRatingText(currentRating);
                  }
              }
          );
          
          // 点击评分
          $('.star').click(function() {
              if (!isSubmitted) {
                  currentRating = $(this).data('value');
                  highlightStars(currentRating);
                  updateRatingText(currentRating);
                  $('.rating-value').text(currentRating + '.0');
              }
          });
          // 提交评分
          $('.submit-btn').click(function() {
              if (currentRating > 0) {
                  isSubmitted = true;
                  $('.rating-text').text('感谢您的评分！');
                  $('.submit-btn').text('已提交').prop('disabled', true);
                  
                  scoreLetter(currentRating);
                  // 添加提交成功动画
                  $('.stars').addClass('submitted');
                  setTimeout(function() {
                      $('.stars').addClass('pulse');
                  }, 300);
              } else {
                  alert('请先选择评分！');
              }
          });
          // 高亮星星
          function highlightStars(count) {
              $('.star').each(function(index) {
                  if (index < count) {
                      $(this).addClass('active');
                  } else {
                      $(this).removeClass('active');
                  }
              });
          }
          // 更新评分文本
          function updateRatingText(rating) {
              const texts = [
                  '请评分',
                  '很差',
                  '一般',
                  '不错',
                  '很好',
                  '非常棒'
              ];
              $('.rating-text').text(texts[rating]);
        }
        function scoreLetter(score) {
          const formData = {"id":"${letter.id}","score":score};
          const token = sessionStorage.getItem("accessToken")
          axios.post('${api}/letter/score',formData,{
              headers: {
                'Tenant-Id': Cms.getTenantId(),
                'Authorization':'Bearer '+token
              }
            }
          ).then(function (response) {
          });
        }
      });
      [/#if]
    </script>
  </body>
</html>
[/#escape]
